﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <link rel="shortcut icon" href="/favicon.ico" type="/image/x-icon">
    <link rel="apple-touch-icon-precomposed" href="">
    <link rel="stylesheet" href="../source/src/css/main.css"/>
    
</head>
<body class="shop-cart-body">
    <!-- 商品列表 -->
    <div class="shop-cart">
        <ul class="order-list" id="order-list">

        </ul>

        <div class="add-more-product">
            <a href="../index.html">
                <i></i>
            </a>
        </div>

        <!--提交订单-->
        <div class="submit-order">
            <div class="wrap clearifx">
                <div class="pro-checkbox on fl">
                    <span class="check-all">
                        <input type="checkbox" id="checkbox-all-btn" class="beautify-checkbox" />
                        <label for="checkbox-all-btn"></label>全选
                    </span>
                     <span class="total-box">
                        共计<span class="total-num">0</span>个商品
                    </span>
                </div>

                <input type="button" class="submit-btn fr" id="submit-order" value="提交订单">
            </div>
        </div>
        <!--/提交订单-->
    </div>

    <!--底部菜单-->
    <div class="pub-nav">
        <ul>
            <li>
                <a href="../index.html">
                    <div class="index pic"></div>
                    <div class="txt">首页</div>
                </a>
            </li>
            <li class="on">
                <a href="./shop_cart.html?v=210818">
                    <div class="shopCart pic"></div>
                    <div class="txt">购物车</div>
                </a>
            </li>
            <li>
                <a href="./me.html">
                    <div class="me pic"></div>
                    <div class="txt">我</div>
                </a>
            </li>
        </ul>
    </div>
    <!--/底部菜单-->


    <!--遮罩层-->
    <div id="mask" class="hide"></div>
    <!--提交订单时候弹窗，显示是否加急-->
    <div class="modal audit-order-modal hide">
        <div class="cont-box">
            <div class="hd text-c">
                是否继续提交操作？
            </div>
            <div class="bd">
                <div class="tl order-type">
                    <label>
                        <input type="radio" name="order-type" id="mto-order" class="beautify-checkbox" />
                        <label class="multiple" for="mto-order"></label>MTO订单
                    </label>
                </div>

                <div class="tl order-type">
                    <label>
                        <input type="radio" name="order-type" id="bulk-estimate-order" class="beautify-checkbox" />
                        <label class="multiple" for="bulk-estimate-order"></label>大货预估订单
                    </label>
                </div>

                <div class="tl order-type">
                    <label>
                        <input type="radio" name="order-type" id="isBig-order" class="beautify-checkbox" />
                        <label class="multiple" for="isBig-order"></label>大货订单
                    </label>
                </div>
            </div>
            <div class="ft clearfix">
                <!-- <a class="sure select-orderType-btn" id="select-orderType-btn">
                     选择
                 </a>-->
                <a class="cancel" id="cancel-orderType-btn">
                    取消
                </a>

                <a class="sure" id="select-orderType-btn">
                    确定
                </a>
            </div>
        </div>
    </div>

    <script id="order-list-tpl" type="text/html">
        {{each CarLists as list i}}
            {{each list.ItemList as li k}}
            <li class="order-item clearfix diy-box" data-code="{{li.Code}}">
                <div class="check-state">
                    <div class="ico">
                        <input type="checkbox" id="checkbox-{{i}}-{{k}}" class="beautify-checkbox" />
                        <label for="checkbox-{{i}}-{{k}}"></label>
                    </div>
                </div>
                <div class="pro-inro flex-1 clearfix diy-box">
                    <div class="pic ">
                        <a href="shop_detail.html?number={{li.Code}}" class="clearfix diy-box">
                            <img src="{{li.Picture}}" alt="{{li.Name}}">
                        </a>
                    </div>
                    <div class="txt flex-1">
                        <div class="tit">
                            <h2>
                                <a href="shop_detail.html?number={{li.Code}}" class="clearfix diy-box">
                                    {{li.Name}}
                                </a>
                            </h2>
                        </div>
                        <div class="other">
                            规格：{{li.Model}}
                        </div>
                        <div class="other">
                            助记码:{{li.HelpCode}}
                        </div>
                        <div class="other">
                           {{li.NameEn}}
                        </div>

                    </div>
                </div>
                <div class="btn-box">
                    <a href="javascript:;" class="delete" title="删除" data-billNo="{{list.BillNo}}"></a>

                    <!--数量-->
                    <div class="change-num clearfix fl">
                        <div class="num_wrap clearfix fl" >
                            <i class="minus minus_disabled fl"></i>
                            <input type="tel" value="{{li.Qty}}"  class="num buynum fl">
                            <i class="plus fl"></i>
                        </div>
                    </div>
                    <!--/数量-->
                </div>
            </li>
            {{/each}}
        {{/each}}
    </script>

    <script src="../source/plugin/zepto.min.js"></script>
    <script src="../source/plugin/artTemplate.js"></script>
    <script src="../source/src/js/common.js"></script>
    <script src="../source/plugin/fastclick.js"></script>
    <script>
        $(function() {
            FastClick.attach(document.body);
        });
        var init ={
            submitFlag:false,
            render:function(){
                var inJson ={
                    "custcode":getCookie('CustCode'),
                    "username":decodeURIComponent(getCookie('username')),
                    "pageindex":1,
                    "pagecount":5,
                    "key":user.key,
                    "account":user.account
                };

                $.ajax({
                    url:apiUrl+'/GetCarItems',
                    type:'GET',
                    data:{"json":JSON.stringify(inJson)},
                    //dataType :'jsonp',
                    success:function(datas){
                        console.log(datas)

                        var html = template('order-list-tpl', datas);
                        $('#order-list').html(html);
                    },
                    error:function(datas){
                        console.log(datas.msg)
                    }
                });
            },
            submitOrder:function(){
                var _this = this;

                $('#submit-order').click(function(){
                    var checkedList = $('#order-list').find(':checked');
                    if(checkedList.length === 0){
                        show_error_tip({str:"请先选择要提交的商品"});
                        return false;
                    }

                    // 显示是否加急的弹窗
                    $('.modal,#mask').show();
                    $('body,html').css({'height':$(window).height(),'overflowY':'hidden'});
                    $('#mto-order')[0].checked = false;
                    $('#bulk-estimate-order')[0].checked = false;
                    $('#isBig-order')[0].checked = false;

                });

                // 点击取消
                $('#cancel-orderType-btn').on('click',function(){
                    $('.modal,#mask').hide();
                    $('body,html').css({'height':'auto','overflowY':'auto'});
                });

                // 点击确定
                $('#select-orderType-btn').on('click',function(){
                    var inJson = {
                        "OrderLists": [
                            {
                                "ItemList": [
                                ],
                                "CustNo": getCookie('CustCode'),
                                "EmpNo": getCookie('EmpCode'),
                                "IsUrgent":'0',              /*是否加急 */
                                "IsDHYGDD":'0',              /*是否大货预估订单*/
                                "IsDHDD":'0',                /*是否大货订单*/
                                "IsMTO":'0',                 /*是否MTO订单*/
                                "key": user.key,
                                "username":decodeURIComponent(getCookie('username')),
                                "account": user.account,
                            }
                        ]
                    };


                    if($('#mto-order')[0].checked){
                        inJson.OrderLists[0].IsMTO = '1';
                    }

                    if($('#bulk-estimate-order')[0].checked){
                        inJson.OrderLists[0].IsDHYGDD = '1';
                    }

                    if($('#isBig-order')[0].checked){
                        inJson.OrderLists[0].IsDHDD = '1';
                    }



                    if(_this.submitFlag) return false;
                    _this.submitFlag = true;


                    //add by lichao 2018-05-01
                    //$("#submit-order").attr("value",'提交中...');
                    //$("#submit-order").attr("disabled",'true');
                    $("#submit-order").val('提交中').addClass('disabled');

                    var checkedList = $('#order-list').find(':checked');
                    checkedList.each(function(i,v){
                        var $this = $(this).parents('li');
                        var currentList = inJson.OrderLists[0].ItemList;
                        var json={
                            Model:"",
                            Picture:"",
                            Price:0,
                            Total:0
                        };
                        json.Code = $this.attr("data-code");
                        json.Name=$this.find('h2').val();
                        json.Qty=$this.find('.buynum').val();
                        currentList.push(json);
                    });



                    // console.log('inJson', inJson)
                    // return;

                    $.ajax({
                        url:apiUrl+'/SubmitOrderItems',
                        type:'GET',
                        data:{"json":JSON.stringify(inJson)},
                        //          dataType :'jsonp',
                        success:function(datas){
                            if(datas.Success==true){
                                show_error_tip({str:'订单编号'+datas.Msg+"提交成功"});
                                location.href="./my_order.html?v=2108231205"
                            }else{
                                show_error_tip({str:"提交失败，请重试"});
                            }
                            _this.submitFlag = false;
                            $("#submit-order").val('提交订单').removeClass('disabled');
                        },
                        error:function(datas){
                            _this.submitFlag = false;
                            $("#submit-order").val('提交订单').removeClass('disabled');
                            console.log(datas.msg)
                        }
                    });
                });
            },
            deleteCarItems:function(){
                $('#order-list').on('click','.delete',function(){
                    var $this = $(this);
                    var inJson ={
                        "BillNo":$this.attr('data-billNo'),
                        "account":user.account,
                        "key":user.key
                    }
                    $.ajax({
                        url:apiUrl+'/DeleteCarItems',
                        type:'GET',
                        data:{"json":JSON.stringify(inJson)},
                        //          dataType :'jsonp',
                        success:function(datas){
                            if(datas.Success==true){
                                $this.parents('li').remove();
                                this.getTotal();
                                show_error_tip({str:'删除成功'});
                            }
                        },
                        error:function(datas){
                            console.log(datas.msg)
                        }
                    });
                });
            },
            addNum:function(){
                var _this = this;
                $('#order-list').on('tap','.plus',function(){
                    var $this = $(this);
                    var numObj = $this.siblings('.num');
                    var numVal = numObj.val()*1;
                    numVal++;
                    if(numVal>1){
                        $this.siblings('.minus').removeClass('minus_disabled');
                    }
                    /* if(numVal>=100){
                     numVal=100;
                     }*/
                    numObj.val(numVal);

                    _this.getTotal(); //获取总数
                });
            },
            reduceNum:function(){
                var _this = this;
                $('#order-list').on('tap','.minus',function(){
                    var $this = $(this);
                    var numObj = $this.siblings('.num');
                    var numVal = numObj.val()*1;
                    numVal--;
                    if(numVal<=1){
                        numVal=1;
                        $this.addClass('minus_disabled');
                    }
                    numObj.val(numVal);
                    _this.getTotal(); //获取总数
                });
            },
            limitInputTxt:function(){
                $('.buynum').on('input onpropertychange',function(){
                    var $this = $(this),
                        val = $this.val();
                    if(/\D/g.test(val)){
                        $this.val(val.replace(/\D/g,''));
                    }
                })
            },
            getTotal:function(){//计算总数量和总价格
                var orderList = $('.order-list');
                var total = 0;
                orderList.find(':checked').each(function(i){
                    var $this=$(this);
                    total += $this.parents('li').find('.buynum').val()*1;
                });

                $('.total-num').html(total);
                return total;
            },
            checkboxHander:function(){
                var _this = this;
                $('#order-list').on('click','input[type=checkbox]',function(){
                    _this.getTotal(); //获取总数
                });
            },
            checkAll:function(){
                var _this = this;
                $('.check-all').on('click',function(){
                    var $this = $(this);
                    checkbox = $this.find('input[type=checkbox]');
                    if(checkbox.prop('checked')){
                        $('.order-list').find('input[type=checkbox]').prop('checked',true);
                    }else{
                        $('.order-list').find('input[type=checkbox]').prop('checked',false);
                    }
                    _this.getTotal(); //获取总数
                });
            },
            showMorePage:function(){
                window.onload=function(aaa){
                    var scrollTimer = null;
                    var listUl = $('#list-ul');
                    $(window).scroll(function(){
                        clearTimeout(scrollTimer);
                        function showMore(){
                            if($('body,html').height() - $(window).scrollTop() -$(window).height() <= 160){
                                var currentPage = listUl.attr('data-page');
                                var totalPage = Math.ceil(1000/6);
                                currentPage++;
                                if(currentPage<=totalPage){
                                    var inJson ={
                                        "custcode":getCookie('CustCode'),
                                        "username":decodeURIComponent(getCookie('username')),
                                        "pageindex":currentPage,
                                        "pagecount":5,
                                        "key":user.key,
                                        "account":user.account
                                    };

                                    $.ajax({
                                        url:apiUrl+'/GetCarItems',
                                        type:'GET',
                                        data:{"json":JSON.stringify(inJson)},
                                        //dataType :'jsonp',
                                        success:function(datas){
                                            console.log(datas)
                                            var html = template('order-list-tpl', datas);
                                            $('#order-list').append(html);
                                        },
                                        error:function(datas){
                                            console.log(datas.msg)
                                        }
                                    });
                                }else{
                                    return false;
                                }
                            }
                        }

                        scrollTimer = setTimeout(function(){
                            showMore();
                        },200)
                    });
                }
            },
            hideOrderBtn:function() {
                if(getCookie('Type')=="True"){
                    $('#submit-order').remove();
                }
            },
            init:function(){
                this.render();
                this.addNum();
                this.reduceNum();
                this.limitInputTxt();
                this.checkboxHander();
                this.checkAll();
                this.submitOrder();
                this.deleteCarItems();
                this.showMorePage();
                this.hideOrderBtn();
            }
        };
        init.init();
    </script>
</body>
</html>